/**
* 功能描述：页头样式表
* @author jin xiaohang
* @date 2022/9/30 8:40
* @version 1.0
*/


@import "src/style/mixins/index";

//布局
@mixin page-header-layout{
  position: relative;
  padding: 16px 24px;

  //页头标题布局
  .#{$namespace}-page-header-heading{
    display: flex;
    justify-content: space-between;

    //页头标题返回键布局
    .#{$namespace}-page-header-heading-left{
      display: flex;
      align-items: center;
      margin: 4px 0;
      overflow: hidden;

      //返回键布局
      .#{$namespace}-page-header-heading-back{
        margin-right: 16px;
        line-height: 1;
      }

      //主标题布局
      .#{$namespace}-page-header-heading-title{
        margin-right: 12px;
        margin-bottom: 0;
        line-height: 32px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      //副标题布局
      .#{$namespace}-page-header-heading-sub-title{
        margin-right: 12px;
        line-height: 1.5715;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

  }

}

//定义样式
@include b(page-header){
  background-color: #fff;
  color: #000000d9;
  border: 1px solid rgb(235, 237, 240);

      //返回键样式
      .#{$namespace}-page-header-heading-back{
        font-size: 16px;
      }

      //主标题样式
      .#{$namespace}-page-header-heading-title{
        color: #000000d9;
        font-weight: 600;
        font-size: 20px;
      }

      //副标题样式
      .#{$namespace}-page-header-heading-sub-title{
        color: #00000073;
        font-size: 14px;
        overflow: hidden;
      }

  //引用布局
  @include page-header-layout;

}